<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .tab ul {
            height: 30px;
        }
        
        .tab li {
            list-style: none;
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        
        .tab li.ac {
            background: #ccc;
        }
        
        .tab .content {
            width: 600px;
            height: 430px;
        }
        
        .tab .content div {
            display: none;
        }
        
        .tab .content div.ac {
            display: block;
        }
        
        .tab img {
            width: 100%;
            height: 100%;
        }
    </style>

</head>

<body>
    <div id="tab" class="tab">
        <ul>
            <li class="ac">item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
        <div class="content">
            <div class="ac">
                <img src="http://n.sinaimg.cn/sinacn22/301/w661h440/20180811/b2c1-hhqtaww9991246.jpg" alt="">
            </div>
            <div>
                <img src="http://p0.ifengimg.com/pmop/2018/0326/0F3C6695D86B3FCFF7FADCBCE3C7FB2D4F94F03B_size43_w640_h400.jpeg" alt="">
            </div>
            <div>
                <img src="http://d-image.i4.cn/i4web/image/upload/20170222/1487751998064070301.jpg" alt="">
            </div>
        </div>
    </div>

    <div id="tab1" class="tab">
        <ul>
            <li class="ac">item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
        <div class="content">
            <div class="ac">
                <img src="http://n.sinaimg.cn/sinacn22/301/w661h440/20180811/b2c1-hhqtaww9991246.jpg" alt="">
            </div>
            <div>
                <img src="http://p0.ifengimg.com/pmop/2018/0326/0F3C6695D86B3FCFF7FADCBCE3C7FB2D4F94F03B_size43_w640_h400.jpeg" alt="">
            </div>
            <div>
                <img src="http://d-image.i4.cn/i4web/image/upload/20170222/1487751998064070301.jpg" alt="">
            </div>
        </div>
    </div>
    <script>
        class Tab {
            constructor(selector) {
                    this.container = document.querySelector(selector);
                    this.btns = this.container.querySelectorAll('ul li');
                    this.imgs = this.container.querySelectorAll('.content>div');
                    this.bindEvents()
                }
                // ES6语法糖；里的方法默认就在原型上
            bindEvents() {
                Array.from(this.btns).forEach((btn, index) => {
                    btn.onclick = () => {
                        // 该方法只负责给所有按钮绑上事件
                        this.changeImg(index)
                    }
                })
            }
            changeImg(i) {
                //通过接收到下标修改样式
                for (var j = 0; j < this.btns.length; j++) {
                    this.btns[j].classList.remove('ac')
                    this.imgs[j].classList.remove('ac')
                }
                this.btns[i].classList.add('ac')
                this.imgs[i].classList.add('ac')
            }
        }
        var t1 = new Tab('#tab')
        var t2 = new Tab('#tab1')
            // 下面这个表达式结果为true，说明class的方法默认在原型上
        console.log(t1.bindEvents == t2.bindEvents)
    </script>
</body>

</html>